<template>
	<view class="pt30 pl20 pb20 pr20">
		<view class="fz24 mt10 mb10 ">{{popTypeName}} <text class="fz20 col33">({{popTypeValue}})</text></view>
		<scroll-view scroll-y="true" class="selectH">
			<view class="alicen flex_wrap">
				<!-- 单选 -->
				<view v-if="flag" class="relative w27b mb10 ml10 mr10 ius10  flexCenter  fz24 pt10 pb10 pl10 pr10"
					v-for="(item,index) in list" :key="index" @click="selected(item,index)"
					:class="selectedVal == index?'col40 bgfff bold border1 borf84746':'border1  bold boree  bgf7' ">
					<view class="">
						{{item.name}}
					</view>
					<image class="absolute b0 r0 w20 h20" :src="selectedVal == index?cosUrl+'check_icon.png':''  "
						mode="aspectFill"></image>
				</view>
				<!-- 多选 -->
				<view v-if="!flag" class="relative w27b mb10 ml10 mr10 ius10  flexCenter fz24 pt10 pb10 pl10 pr10"
					v-for="(item,index) in list" :key="index" @click="selected(item,index)"
					:class="arr.includes(item)?'col40 bgfff bold border1 borf84746':'border1  bold boree  bgf7' ">
					<view class="">
						{{item.name}}
					</view>
					<image class="absolute b0 r0 w20 h20" :src="arr.includes(item)?cosUrl+'check_icon.png':''  "
						mode="aspectFill"></image>
				</view>
			</view>
		</scroll-view>
		<view class="flex alicen">
			<view @click="reset()" class="pt20 pb20 border1 fz28 borf84746 flex1 ius100 col40 flexCenter">重置</view>
			<view @click="submit(typesign)" class="flex2 ml20 flexCenter ml20 mr20 ius100 pt20 pb20 bgff000 colff fz28">确定</view>
		</view>
		
	</view>
</template>

<script>
	export default {

		props: {
			//是否单选
			flag: {
				type: Boolean,
				default: true,
			},
			popTypeName: {
				type: String,
				default: "",
				require: true
			},
			popTypeValue: {
				type: String,
				default: "",
				require: true
			},
			typesign: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ""
			},
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				selectedVal: 0,
				selectButtonStyle: {
					backgroundColor: "#288BF0",
					fontColor: "#FFFFFF"
				},
				noSelectButtonStyle: {
					backgroundColor: "#F1F1F1",
					fontColor: "#080808"
				},
				arr: [],
			};
		},
		methods: {
			reset(){
				if(this.flag){
					this.selectedVal = null
				}else{
					this.arr = []
				}
			},
			selected(item, index) {
				if (this.flag) {
					this.selectedVal = index
				} else {
					let a1 = this.arr.includes(item)
					if (!a1) {
						this.arr.push(item)
					}
					if (a1) {
						this.arr = this.arr.filter(item1 => item1 != item);
					}
				}
			},
			submit(type1) {
				this.$emit("popStatus", false)
				if (this.flag) {
					let currItem = this.selectedVal == null?{}:this.list[this.selectedVal]
					this.$emit("submit", {
						popTypeName: this.popTypeName,
						popTypeValue: this.popTypeValue,
						potypesignValue: type1,
						flag:this.flag,
						val:currItem
					})
				} else {
					this.$emit("submit", {
						popTypeName: this.popTypeName,
						popTypeValue: this.popTypeValue,
						potypesignValue: type1,
						flag:this.flag,
						val: this.arr
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.selectH{
		height: calc(100vh - 600rpx);
		overflow: auto;
	}
</style>